<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-09 10:07:06
 * @LastEditTime: 2019-10-17 14:13:05
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="qiren animated bounceInRight">
    <div class="header">
      <div @click="histry">
        <img src="../../assets/histry.png">
        返回
      </div>
      <span class="reg" style="margin-left:-0.4rem;">企业认证</span>
      <span class="log"></span>
    </div>
    <div class="con">
        <ul>
            <li>
                <input type="text" placeholder="请输入您所属公司名称" :maxlength="name" @keyup="keyu" v-model="qiname">
                <div class="ji">
                    <span :class="name_ji?'text1':'text2'">{{name_chang}}</span><span style="color:#CCCCCC">/{{name}}</span>
                </div>
            </li>
            <li>
                <input type="text" placeholder="请输入统一社会信用代码" maxlength="18" @keyup="keyua" v-model="qihao">
                <div class="ji">
                    <span :class="xin_ji?'text1':'text2'">{{xin_chang}}</span><span style="color:#CCCCCC">/18</span>
                </div>
            </li>
        </ul>
        <p style="color:#1A2533;margin-top:0.3rem;">注意事项</p>
        <p>1.请输入您所属公司营业执照上的公司名称</p>
        <p>2.请输入您所属公司营业执照上统一社会信用代码</p>
        <p>3.注意区分总公司和分公司</p>
        <p style="margin-bottom:0;">4.公司名称和统一社会信用代码将用于企业认证使用，请确保其 准确性</p>
        <img class="lizi_zhizhao" src="../../assets/zhizhao.png" alt="" @click="up_zhizhao">
        <van-image-preview
        v-model="show"
        :images="images"
        >
        </van-image-preview>
    </div>
    <div :class="baocun?'btn1':'btn2'" @click="renzheng">立即认证</div>
  </div>
</template>

<script>
import { check_login } from "../../api/api.js";
export default {
  name: "qiren",
  data() {
    return {
      email: "",
      baocun:true,
      phone:'',
      name:46,
      name_chang:0,
      qiname:'',
      name_ji:true,
      xin_chang:0,
      xin_ji:true,
      qihao:'',
      show: false,
      images: [
        "https://www.meilibaobiao.com/images/mlbb/zhizhao.png"
      ],
      baocun:true,
    };
  },
  mounted() {
    if (sessionStorage.getItem("mobile") != null) {
      this.phone = JSON.parse(sessionStorage.getItem("mobile"));
    }
    check_login({
      data: {
        mobile: this.phone
      }
    }).then(res => {
      if (res.data.code == 11001) {
      } else if (res.data.code == 11000) {
        this.$toast("未登录，请重新登录");
        this.$router.push("/");
      }
    });
    // this.dao()
  },
  created(){
  },
  watch: {},
  methods: {
    // 返回上一层
    histry() {
      this.$router.go(-1);
    },
    // 监听文字个数
    keyu(){
        this.name_chang=this.qiname.length
        if(this.name_chang>=1){
            this.name_ji=false
        }else{
            this.name_ji=true
        }
        if(this.name_chang>=4&&this.xin_chang==18){
            this.baocun=false
        }else{
            this.baocun=true
        }
    },
    // 监听信用代码位数
    keyua(){
        this.xin_chang=this.qihao.length
        if(this.xin_chang>=1){
            this.xin_ji=false
        }else{
            this.xin_ji=true
        }
        if(this.name_chang>=4&&this.xin_chang==18){
            this.baocun=false
        }else{
            this.baocun=true
        }
    },
    up_zhizhao(){
        this.show=true
    },
    // 认证
    renzheng(){
        if(this.baocun==false){
            this.$loading.open();
            this.$loading.close();
        }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.qiren {
  height: 100vh;
  background: #fff;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 0.5rem;
    line-height: 0.5rem;
    padding: 0 0.15rem;
    border-bottom: 0.01rem solid #eee;
    div {
      display: flex;
      justify-content: left;
      align-items: center;
      color: #979797;
      font-size: 0.14rem;
      img {
        height: 0.16rem;
        width: 0.08rem;
        margin-right: 0.08rem;
      }
    }
    .reg {
      font-size: 0.18rem;
      color: #1a2533;
      font-weight: 500;
    }
    .log {
      font-size: 0.14rem;
      color: #e82716;
      font-weight: bold;
    }
  }
    .con{
        padding: 0 0.15rem;
        ul{
            li{
                position: relative;
                input {
                    margin-top:0.2rem;
                    border: none;
                    border-bottom: 0.01rem solid #eee;
                    width:100%;
                    padding-bottom: 0.15rem;
                    color:#1A2533;
                    font-size: 0.16rem;
                }
                input::-webkit-input-placeholder {
                    color: #CCCCCC;
                    font-size: 0.16rem;
                }
                input:-moz-placeholder {
                    color: #CCCCCC;
                    font-size: 0.16rem;
                }
                input::-moz-placeholder {
                    color: #CCCCCC;
                    font-size: 0.16rem;
                }
                input:-ms-input-placeholder {
                    color: #CCCCCC;
                    font-size: 0.16rem;
                }
                .ji{
                    position: absolute;
                    right:0rem;
                    top:0.25rem;
                    span{
                        font-size: 0.12rem;
                    }
                    .text1{
                        color: #E82716;
                    }
                    .text2{
                        color:#ccc;
                    }
                }
            }
        }
        p{
            font-size: 0.12rem;
            margin-bottom: 0.08rem;
            color:#A9A9A9;
            line-height: 0.2rem;
        }
        .lizi_zhizhao{
            height:1.42rem;
            width:1.35rem;
            display: block;
            margin: 0 auto;
            margin-bottom: 0.92rem;
        }
    }
    .btn1{
        height:0.47rem;
        width:3.46rem;
        margin:0 auto;
        text-align: center;
        line-height: 0.47rem;
        color:#fff;
        font-size: 0.18rem;
        background: #A9A9A9;
        border-radius: 0.04rem;
    }
    .btn2{
        height:0.47rem;
        width:3.46rem;
        margin:0 auto;
        text-align: center;
        line-height: 0.47rem;
        color:#fff;
        font-size: 0.18rem;
        background: -webkit-linear-gradient(left, #E82716, #FC6565);
        background: -o-linear-gradient(right, #E82716, #FC6565);
        background: -moz-linear-gradient(right, #E82716, #FC6565);
        background: linear-gradient(to right, #E82716, #FC6565);
        border-radius: 0.04rem;
    }
}
</style>
